<template>
    <view>
        <!-- 评论列表 -->
        <view class="list" v-if="commentList.length">
            <view class="item" v-for="(item, index) in commentList" :key="item.id">
                <!-- 基本信息 -->
                <view class="business">
                    <!-- 头像 -->
                    <view class="avatar" @click="goCenter(item.busid)">
                        <image mode="aspectFit" :src="item.business ? item.business.avatar_text : ''"></image>
                    </view>
                    <!-- 用户 -->
                    <view class="base">
                        <view class="name">
                            <view class="nickname">{{ item.business ? item.business.nickname : '默认用户' }}</view>
                            <view class="createtime">{{ item.createtime.split(" ")[0] }}</view>
                        </view>
                        <view class="desc">{{ item.business.region_text.split("/")[0] }}</view>
                    </view>
                </view>

                <!-- 详细内容 -->
                <view class="content">{{ item.content }}</view>

                <!-- 操作 -->
                <view class="action">
                    <view class="left">
                        <view class="tag">
                            <u-tag style="width: 5.3125rem;" :text="item.like_num ? '赞同' + item.like_num : '赞同'"
                                type="success" plain :icon="item.like_text ? 'thumb-up-fill' : 'thumb-up'"
                                @click="like(item.id)"></u-tag>
                        </view>
                        <view v-if="item.comment_num" class="comment" @click="getMoreComment(index)">
                            <u-icon name="chat" size="25"></u-icon>{{ item.comment_num }} 条评论
                        </view>
                    </view>
                    <view class="right">
                        <view class="operation">
                            <u-icon name="more-dot-fill" size="20" @click="showMenu(item, index)"></u-icon>
                        </view>
                    </view>
                </view>

                <!-- 采纳信息 -->
                <view class="accept">
                    <u-tag v-if="post.accept && item.status == '1'" text="已采纳" type="success" plain shape="circle"
                        size="large"></u-tag>
                </view>

                <!-- 子级评论 -->
                <comment :postid='postid' :busid='busid' :pid='item.id' v-if="item.comment_num > 0 && item.hackReset">
                </comment>

            </view>
        </view>
        <view class="list" v-else>
            <u-empty mode="comment" icon="http://cdn.uviewui.com/uview/empty/comment.png">
            </u-empty>
        </view>
        <!-- 弹出层 -->
        <u-popup :show="MenuShow" @close="MenuShow = false">
            <view class="menu">
                <view class="grid">
                    <u-grid :border="true">
                        <u-grid-item @click="showAnswer">
                            <u-icon name="edit-pen-fill" size="35"></u-icon>
                            <u--text type="warning" text="补充回答" align="center"></u--text>
                        </u-grid-item>
                        <u-grid-item v-if="business.id != selectBusid && post.status == 0 && business.id == post.busid"
                            @click="adopt">
                            <u-icon name="checkmark" size="35"></u-icon>
                            <u--text type="success" text="采纳此答案" align="center"></u--text>
                        </u-grid-item>
                        <u-grid-item v-if="business.id == post.busid || selectBusid == business.id"
                            @click="removeComment">
                            <u-icon name="trash-fill" size="35"></u-icon>
                            <u--text type="error" text="删除" align="center"></u--text>
                        </u-grid-item>
                    </u-grid>
                </view>
                <u-button class="btn" type="error" text="取消" @click="MenuShow = false"></u-button>
            </view>
        </u-popup>

        <!-- 弹框组件 -->
        <!-- 回答弹出层 -->
        <u-popup :show="AnswerShow" @close="AnswerShow = false">
            <view class="answer">
                <u-form labelPosition="top" labelWidth="150" :model="comment" :rules="rules" ref="answer">
                    <u-form-item label="回答描述：" prop="content" ref="content">
                        <u--textarea v-model="comment.content" placeholder="请输入回答描述"></u--textarea>
                    </u-form-item>

                    <view class="btn">
                        <u-button type="primary" text="提交答案" formType="submit" @click="submit"></u-button>
                    </view>
                </u-form>
            </view>
        </u-popup>

        <!-- 采纳弹框组件 -->
        <u-modal :show="AcceptShow" :title="'采纳提醒'" :content="'是否确认采纳此答案'" showCancelButton :closeOnClickOverlay="true"
            @cancel="AcceptShow = false" @close="AcceptShow = false" @confirm="acceptAnswer"></u-modal>
        <!-- 确认删除组件 -->
        <u-modal :show="removeShow" :title="'删除提醒'" :content="'是否确认删除此评论'" showCancelButton :closeOnClickOverlay="true"
            @cancel="removeShow = false" @close="removeShow = false" @confirm="removeAnswer"></u-modal>
        <!-- 提醒组件 -->
        <u-toast ref="notice"></u-toast>
    </view>
</template>

<script>
import comment from '@/components/comment/comment.vue';
import Vue from 'vue';
export default {
    name: "comment",
    props: {
        postid: {
            required: true,
            default: 0
        },
        busid: {
            require: true,
            default: 0
        },
        pid: {
            require: true,
            default: 0
        }
    },
    created() {
        //  #ifdef H5 || APP-PLUS 
        this.getData()
        this.getComment()
        // #endif
        this.business = uni.getStorageSync("business") ? uni.getStorageSync("business") : {};
    },
    // #ifdef MP-WEIXIN
    onReady(){
        this.getData()
        this.getComment()
    },
    // #endif
    data() {
        return {
            MenuShow: false,
            AnswerShow: false,
            AcceptShow: false,
            removeShow: false,
            business: {},
            selectBusid: 0,
            selectPid: 0,
            select: 0,
            content: `
					<b>这个是正文内容</b>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
            comment: {
                content: '',
            },
            post: {},
            commentList: [],
            rules: {
                content: {
                    type: 'string',
                    required: true,
                    message: '请填写回答内容',
                    trigger: ['blur', 'change']
                },
            },
            hackReset: false
        }
    },
    methods: {
        submit() {
            //判断是否有通过表单验证
            this.$refs.answer.validate()
                .then(async res => {
                    this.AnswerShow = false
                    // 判断是否登录
                    if (!this.business.id) {
                        this.$refs.notice.show({
                            type: "error",
                            message: "请先登录"
                        })
                        return false
                    }
                    let data = {
                        busid: this.business.id,
                        content: this.comment.content,
                        postid: this.postid,
                        pid: this.selectPid
                    }
                    let result = await uni.$u.http.post("/post/addComment", data);
                    if (result.code) {
                        this.$refs.notice.show({
                            type: 'success',
                            message: result.msg,
                            duration: 1000,
                            complete: async () => {
                                this.comment.content = ''
                                await this.getComment()
                                // 重新渲染子组件
                                this.commentList[this.select].hackReset = false
                                this.$nextTick(() => {
                                    this.commentList[this.select].hackReset = true
                                })
                                this.triggerCustomEvent();
                            }
                        })
                    } else {
                        this.$refs.notice.show({
                            type: 'error',
                            message: result.msg,
                        })
                    }
                })
                .catch(error => {
                    console.log(error)
                    this.$refs.notice.show({
                        type: 'error',
                        message: '效验失败'
                    })
                })
        },
        async getData() {
            let data = {
                postid: this.postid
            }
            let result = await uni.$u.http.post("/post/info", data)
            if (result.code) {
                this.post = result.data
            } else {
                this.$refs.notice.show({
                    message: result.msg,
                    duration: 1000,
                    complete: () => {
                        uni.$u.route({
                            type: "back"
                        })
                    }
                })
            }
        },
        async getComment() {
            let data = {
                postid: this.postid,
                pid: this.pid
            }
            let result = await uni.$u.http.post("/post/comment", data)
            if (result.code) {
                this.commentList = result.data
                this.commentList.forEach(item => {
                    if (item.like) {
                        item.like_text = item.like.split(",").includes(this.business.id.toString())
                        item.like_num = item.like.split(",").length
                    } else {
                        item.like_text = false,
                            item.like_num = 0
                    }
                    // 往对象中添加自定义的响应式属性
                    Vue.set(item, 'hackReset', false)
                })
            }
        },
        showMenu(obj, index) {
            // 判断是否登录
            if (!this.business.id) {
                this.$refs.notice.show({
                    type: "error",
                    message: "请先登录"
                })
                return false
            }
            this.select = index
            this.MenuShow = true
            this.selectBusid = obj.busid
            this.selectPid = obj.id
        },
        showAnswer() {
            this.AnswerShow = true;
            this.MenuShow = false
        },
        async adopt() {
            this.MenuShow = false
            this.AcceptShow = true
        },
        async acceptAnswer() {
            this.AcceptShow = false
            // 判断是否是自身的评论
            if (this.selectBusid == this.post.busid) {
                this.$refs.notice.show({
                    type: "error",
                    message: "不能采纳自己的答案"
                })
                return false
            }
            let data = {
                postid: this.postid,
                accept: this.selectBusid,
                commentid: this.selectPid
            }
            // 发送请求
            let result = await uni.$u.http.post("/post/adpot", data)
            if (result.code) {
                this.$refs.notice.show({
                    type: "success",
                    message: result.msg,
                    duration: 1000,
                    complete: () => {
                        this.triggerCustomEvent();
                        this.getComment()
                    }
                })
            } else {
                this.$refs.notice.show({
                    type: 'error',
                    message: result.msg
                })
                return false
            }
        },
        async like(id) {
            // 判断是否登录
            if (!this.business.id) {
                this.$refs.notice.show({
                    type: 'error',
                    message: "请先登录"
                })
                return false
            }
            let data = {
                id,
                busid: this.business.id
            }
            let result = await uni.$u.http.post("/post/like", data);
            if (result.code == 0) {
                this.$refs.notice.show({
                    type: 'error',
                    message: result.msg
                })
                return false
            } else {
                this.getComment();
                return false
            }
        },
        getMoreComment(index) {
            this.commentList[index].hackReset = !this.commentList[index].hackReset
        },
        triggerCustomEvent() {
            uni.$emit('custom-event', 'Hello UniApp!'); // 触发自定义事件并传递参数
        },
        removeComment() {
            this.removeShow = true;
            this.MenuShow = false
        },
        async removeAnswer() {
            this.removeShow = false
            let data = {
                commentid: this.selectPid,
            }
            let result = await uni.$u.http.post("/post/removeComment", data)
            if (result.code) {
                this.$refs.notice.show({
                    type: "success",
                    message: result.msg,
                    duration: 1000,
                    complete: async () => {
                        this.MenuShow = false
                        await this.getComment()
                        // // if(this.commentList.length == 0){
                        //     this.change(true)
                        // // }
                        this.triggerCustomEvent()
                    }
                })
            } else {
                this.$refs.notice.show({
                    type: "error",
                    message: result.msg
                })
            }
        },
        goCenter(busid) {
            uni.$u.route({
                url: "/pages/business/center",
                params: { busid }
            })
        }

    }
}
</script>

<style>
.post {
    background: #f4f6f8;
}

.info {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgba(0, 78, 255, .1);
}

/* 标签 */
.info .tag {
    display: flex;
    margin-bottom: 10px;
}

.info .tag .item {
    margin-right: 5px;
}

/* 标题 */
.info .title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: .5em;
}

/* 用户信息 */
.author {
    display: flex;
    align-items: center;
    align-content: center;
    color: #999;
    font-size: .8em;
}

.author .avatar {
    width: 2em;
    height: 2em;
    border-radius: 100%;
    overflow: hidden;
    margin-right: 10px;
}

.author .avatar image {
    width: 100%;
    height: 100%;
}

.author .nickname,
.author .createtime {
    margin-right: 10px;
}


/* 详细内容 */
.content {
    margin: 10px 0px;
    overflow: hidden;
}

.content img {
    width: 100%;
    height: 100%;
}

.info .bottom {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.info .bottom .btn {
    width: 10em;
    margin-right: 15px;
}

.info .bottom .btn:last-of-type {
    margin-right: 0px;
}

/* 评论列表 */
.list {
    width: 97%;
    margin: 0 auto;
}

.list .item {
    width: 91%;
    margin: 0 auto;
    margin-bottom: 5px;
    padding: 15px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgba(0, 78, 255, .1);
    position: relative;
}

.list .item .accept {
    position: absolute;
    right: 3%;
    top: 45%;
}

.list .item .business {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.business .avatar {
    width: 2em;
    height: 2em;
    border-radius: 100%;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}

.business .avatar image {
    width: 100%;
    height: 100%;
}

.business .base {
    width: 90%;
    padding: 5px 10px;
    font-size: .8em;
}

.business .base .name {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.business .base .name .nickname {
    font-weight: bold;
    color: #000;
}

.business .base .name .createtime {
    color: #999;
}

.business .base .desc {
    color: #999;
}

.item .content {
    font-size: .9em;
    color: #303133;
    margin-bottom: 30px;
}

.item .action {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

.item .action .left {
    display: flex;
}

.item .action .right {
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    margin-top: 4px;
}

.item .action .tag {
    margin-right: 10px;
}

.item .action .comment {
    display: flex;
    align-content: center;
    align-items: center;
}

/* 弹出菜单 */
.menu .grid {
    margin: 20px 0px;
}

.btn {
    border-radius: 0px;
}

/* 回答内容 */
.answer {
    padding: 20px;
}
</style>